<template>
  <div id="grab-card" class="calendar-main">
    <div id="move-card" class="comp-main-card">
      <div
        v-for="i in 120"
        :key="i"
        :class="[
          'year-card',
          { active: staticData.now.year === birthYear + i - 1 },
          { 'past-days': staticData.now.year > birthYear + i - 1 },
          { 'future-days': staticData.now.year < birthYear + i - 1 && i <= 65 },
          { 'retire-days': i > 65 && i <= 80 },
          { 'older-days': i > 80 }
        ]"
      >
        <div class="content">{{ birthYear + i - 1 }}</div>
        <div class="hover-content">{{ i - 1 }} 岁</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default defineComponent({ name: 'CompMainCard' })
</script>
<script setup lang="ts">
import { defineComponent, onUnmounted, ref } from 'vue'
import MouseMover from '@/utils/modules/MouseMover'

import { useLifeCalender } from '../hooks/lifeCalender'

const mainCardScale = ref(1)

const MO = new MouseMover({
  id: ['grab-card', 'move-card'],
  canScaleByMousewheel: true,
  defaultScale: mainCardScale.value
})
onUnmounted(() => MO.destroy())

const { staticData } = useLifeCalender()
const birthYear = staticData.user.birthdayObj.year
</script>

<style lang="scss">
@import '../theme.scss';
</style>
<style lang="scss" scoped>
// calendar-main 这层结构是专门为主box居中准备的。因为views-life-calendar下面还有其他的模块
.calendar-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .comp-main-card {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    height: 1200px;
    position: absolute;
    user-select: none;
    transition: transform 0.1s;
    .year-card {
      border: 0.1px solid var(--border-color);
      border-radius: 4px;
      height: 90px;
      width: 90px;
      margin: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      &.past-days {
        // opacity: 0.7;
        color: var(--color-50p);
        background-color: rgba(0, 0, 0, 0.25);
      }
      &.active {
        color: var(--color);
        background-color: rgba(255, 255, 255, 0.2);
      }
      &.future-days {
        background-color: rgba(0, 0, 0, 0.15);
      }

      &.retire-days {
        background-color: rgba(0, 0, 0, 0.3);
      }
      &.older-days {
        // opacity: 0.7;
        color: var(--color-50p);
        background-color: rgba(0, 0, 0, 0.5);
      }
      .content {
        opacity: 1;
        transition: all 0.3s;
      }
      .hover-content {
        margin-top: -30px;
        opacity: 0;
        position: absolute;
        backdrop-filter: blur(15px); // 毛玻璃
        transition: all 0.3s;
      }
      &:hover {
        .content {
          opacity: 0;
        }
        .hover-content {
          margin-top: 0;
          opacity: 1;
          z-index: 1;
        }
      }
    }
  }
}
</style>
